<template>
    <div>
        <el-dialog title="抵销" v-model="editVisible" width="50%" top="5vh" :close-on-click-modal="false"
            @close="handleclose">
            <el-form label-width="100px">
                <el-form-item label="抵销项目：" :required="true">
                    <el-select v-model="Refused.reason" style="width: 100%" placeholder="请选择">
                        <el-option v-for="item in List" :key="item.paramName" :label="item.paramName"
                            :value="item.paramName"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="项目标题：" :required="true">
                    <el-input v-model="Refused.title" type="input"></el-input>
                </el-form-item>
                <el-form-item label="项目人数：" :required="true">
                    <el-input v-model="Refused.num" type="input"></el-input>
                </el-form-item>
                <el-form-item label="项目设备：" :required="true">
                    <el-select v-model="Refused.sheb" style="width: 100%" placeholder="请选择" @change="handleSeleceEquipment">
                        <el-option v-for="item in equipmentList" :key="item.paramName" :label="item.paramName"
                            :value="item.paramName"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="其他：">
                    <el-input v-model="Refused.orther" type="input"></el-input>
                </el-form-item>
                <el-form-item>
                    <div style="text-align: left">
                        需抵销碳排量：<span>{{ is_CarbonNum ? 10 : 0 }}</span>吨
                    </div>
                </el-form-item>
                <el-form-item :required="true">
                    <!-- <div class="displayflex marginleft70">
              <el-upload
                :action="uploaddata.url"
                :data="uploaddata.data"
                :on-preview="handlePictureCardPreview"
                :headers="uploaddata.headers"
                name="file"
                accept=".png,.jpg,.gif"
                list-type="picture-card"
                @click="handleUpload"
                :on-remove="handleRemove"
                :on-success="Uploadsuccess"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </div> -->
                    <div class="btn_b displayflex justify-content margintop30">
                        <el-button @click="handleclose" class="icon-search1">取消</el-button>
                        <el-button type="primary" class="icon-search" @click="handleSaveEdit">提交</el-button>
                    </div>
                </el-form-item>
            </el-form>
            <template #footer> </template>
        </el-dialog>
    </div>
</template>
<script>
import { ref, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import api from "../api/api";
export default {
    components: {},
    setup(props, context) {
        console.log(context);
        // 参考图片
        const editVisible = ref(context.attrs.editVisible);
        const radioValue = ref(context.attrs.radioValue);
        const Refused = reactive({
            reason: "低碳会议",
            remark: "",
            title: "第一阶段产品进度会议",
            num: 8,
            sheb: "笔记本电脑，投影仪",
            orther: "",
        });
        const router = useRouter();
        const handleclose = () => {
            editVisible.value = false;
            context.emit("handleclose", editVisible.value);
        };
        //图片上传
        const uploaddata = ref({});
        const handleUpload = () => {
            uploaddata.value = {
                url: api.getUrl() + "auth/file/upload", //接口名称
                data: {
                    upType: "fc",
                    sort: Math.floor(Math.random() * 20) + 1,
                },
                headers: {
                    token: localStorage.getItem("token"),
                    Authorization: "Bearer " + localStorage.getItem("token"),
                },
            };
        };
        const is_CarbonNum = ref(true);
        const handleSaveEdit = () => {
            context.emit("handleSaveEdit", Refused);
        };
        const handleSeleceEquipment = () => {
            is_CarbonNum.value = true;
        };
        return {
            List: [
                {
                    paramName: "低碳会议",
                },
                {
                    paramName: "低碳建团",
                },
            ],
            equipmentList: [
                {
                    paramName: "笔记本电脑，投影仪",
                },
                {
                    paramName: "投影仪",
                },
            ],
            is_CarbonNum,
            router,
            radioValue,
            editVisible,
            uploaddata,
            Refused,
            handleclose,
            handleSaveEdit,
            handleUpload,
            handleSeleceEquipment,
        };
    },
};
</script>
  
<style lang="less" scoped>
@import "../assets/css/common.css";

&:deep(.el-dialog) {
    background: #fff !important;
}

&:deep(.el-dialog__headerbtn .el-dialog__close) {
    color: #909399;
    background: #fff;
    width: 30px;
    height: 30px;
    border-radius: 360px;
    font-size: 30px;
}

&:deep(.el-form-item__content) {
    text-align: center;
}

.btn_b {
    padding: 30px;
}
</style>
  